<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ScrollIntoView demo</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <nav>
    <ul>
      <li onclick="handleChangeTab(1)" ><a href="#section-1">Support</a></li>
      <li onclick="handleChangeTab(2)"><a href="#section-2">Documentation</a></li>
      <li onclick="handleChangeTab(3)"><a href="#section-3">Section 3</a></li>
      <li onclick="handleChangeTab(4)"><a href="#section-4">Section 4</a></li>
      <li onclick="handleChangeTab(5)"><a href="#section-5">Section 5</a></li>
      <li onclick="handleChangeTab(6)"><a href="#section-6">Section 6</a></li>
    </ul>
  </nav>
  <main>
    <section id="section-1">
      <h2>Support</h2>
      <p>Browser support -> <a href="https://caniuse.com/#feat=scrollintoview" target="_blank">Can I Use ScrollIntoView</a></p>
    </section>
    <section id="section-2">
      <h2>Documentation</h2>
      <p>Documentacion -> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView" target="_blank">MDN ScrollIntoView</a></p>
    </section>
    <section id="section-3">
      <h2>Section 3</h2>
    </section>
    <section id="section-4">
      <h2>Section 4</h2>
      <p>Section 4 -> <a href="https://caniuse.com/#feat=scrollintoview" target="_blank">Can I Use ScrollIntoView</a></p>
    </section>
    <section id="section-5">
      <h2>Section 5</h2>
      <p>Section 5 -> <a href="https://caniuse.com/#feat=scrollintoview" target="_blank">Can I Use ScrollIntoView</a></p>
    </section>
    <section id="section-6">
      <h2>Section 6</h2>
      <p>Section 6 -> <a href="https://caniuse.com/#feat=scrollintoview" target="_blank">Can I Use ScrollIntoView</a></p>
    </section>
  </main>
  <script src="./script.js"></script>
  <script src="https://unpkg.com/vue@next"></script>
</body>
</html>